<template>
  <!-- 首页推荐 -->
  <div class="t-buy clearfix">
    <search></search>

    <div style="width: 100%; height: 600px; margin-top: 80px;">
      <table style="width: 94%; height: 600px; margin-left: 3%;">

        <tbody>
          <tr>
            <td colspan="5" style="height: 25px; font-size: 17px; color: #004e98; font-weight: bold; padding-bottom: 5px; border-bottom: 1px dashed #999;">
              <span>大家都在买</span>
            </td>
          </tr>
          <tr class="cltr">
            <!-- 循环渲染 -->
            <td v-for="(item,index) in recommendShares" :key="index" class="cltd">
              <div style="width: 100%;">
                <div style="width: 50%; height: 30px; float: left; text-align: left; line-height: 30px;">
                  &nbsp;&nbsp;{{item.name}}
                </div>
                <div :class="{'upcolor':item.current_price.indexOf('-') == -1}" class="clr">
                  {{item.current_price}}
                </div>
                <div class="cll">
                  &nbsp;&nbsp;振幅
                </div>
                <div :class="{'upcolor':item.current_price.indexOf('-') == -1}" class="clr">
                  {{item.zhenfu}}
                </div>
                <div class="cll">
                  &nbsp;&nbsp;最高价
                </div>
                <div class="clr">
                  {{item.high}}
                </div>
                <div class="cll">
                  &nbsp;&nbsp;最低价
                </div>
                <div class="clr">
                  {{item.low}}
                </div>
                <div class="cll">
                  &nbsp;&nbsp;昨收
                </div>
                <div class="clr">
                  {{item.yesterday_end_price}}
                </div>
                <div class="cll">
                  &nbsp;&nbsp;今开
                </div>
                <div class="clr">
                  {{item.today_begin_price}}
                </div>
              </div>
              <div style="width: 100%; height: 40px; float: left; text-align: center;">
                <div @click="buy(item.code)" class="xz">
                  选择
                </div>
              </div>
            </td>
          </tr>
        </tbody>

        <tbody>
          <tr>
            <td colspan="5" style="height: 25px; font-size: 17px; color: #004e98; font-weight: bold; padding-bottom: 5px; border-bottom: 1px dashed #999;">
              <span>最近购买</span>
            </td>
          </tr>
          <tr class="cltr">
            <!-- 循环渲染 -->
            <td v-for="(item,index) in history" :key="index" class="cltd">
              <div style="width: 100%;">
                <div style="width: 50%; height: 30px; float: left; text-align: left; line-height: 30px;">
                  &nbsp;&nbsp;{{item.name}}
                </div>
                <div class="clr">
                  {{item.code | filtersName}}
                </div>
                <div class="cll">
                  &nbsp;&nbsp;仓费
                </div>
                <div class="clr">
                  {{item.cangfei}}
                </div>
                <div class="cll">
                  &nbsp;&nbsp;递延费
                </div>
                <div class="clr">
                  {{item.count_diyanfei}}
                </div>
                <div class="cll">
                  &nbsp;&nbsp;价格
                </div>
                <div class="clr">
                  {{item.price}}
                </div>
                <div class="cll">
                  &nbsp;&nbsp;股数
                </div>
                <div class="clr">
                  {{item.num}}
                </div>
                <div class="cll">
                  &nbsp;&nbsp;创建时间
                </div>
                <div class="clr">
                  {{item.created_at}}
                </div>
              </div>
              <div style="width: 100%; height: 40px; float: left; text-align: center;">
                <div class="xz">
                  选择
                </div>
              </div>
            </td>
          </tr>
        </tbody>

      </table>
    </div>
  </div>
</template>

<script>
import Axios from "@/common/js/Axios";
//引入搜索功能
import Search from '@/components/Search'
export default {
  mounted() {
    this.token = localStorage.getItem("Authorization");
    this.getRecommend();
    this.getHistory();    
  },
  components: {
    Search
  },
  data() {
    return {
      //购买记录
      history:[],
      //推荐股票
      recommendShares: {},
      token:""
    };
  },
  methods: {
    //购买股票
    buy(code){
      localStorage.setItem("bugCode",code);
      this.$router.push("/cl/create");
    },
    //获取推荐股票
    getRecommend() {
      Axios.getAxios(
        "/api/stock/getRealTimeInfos/sh000001,sz399006,sz399001,sz300028,sz300736",
        {}
      ).then(
        res => {
          this.recommendShares = res.data;
        },
        err => {
          console.log(err);
        }
      );
    },
    //获取购买记录
    getHistory() {
      Axios.getAxios(
        "/api/strategyHistory/normal",
        {},
        {
          Authorization:"Bearer "+this.token
        }
      ).then(
        res => {          
          this.history = res.data.data.slice(0,5);
        },
        err => {
          this.$message.error("请检查您的登录状态")          
        }
      );
    }
  }
};
</script>

<style lang="stylus" scoped>
.cll {
  width: 50%;
  height: 30px;
  float: left;
  text-align: left;
  line-height: 30px;
  color: #ccc;
}
.clr {
  width: 50%;
  height: 30px;
  float: left;
  text-align: center;
  line-height: 30px;
}
.cltd {
  width: 212px;
  display: inline-block;
  height: 270px;
  border: 1px solid #e0e0e0;
  margin-right: 8px;
  padding-top: 20px;
  box-sizing: border-box;
}
.cltr {
  display: flex;
  margin-top: 10px;
}
.xz {
  width: 30%;
  height: 24px;
  margin-left: 35%;
  margin-top: 8px;
  border: 1px solid rgb(0, 78, 152);
  color: rgb(0, 78, 152);
  text-decoration: none;
  cursor: pointer;
  background: rgb(238, 247, 255);
}
</style>


